<template>
  <template v-if="guestFilmList.length">
    <view class="box" v-for="(item, index) in guestFilmList" :key="index">
      <view class="top" @click="handleViewBigPhoto(item.imgs)">
        <u-image
          :show-loading="true"
          :src="guestFilmList[index]?.imgs[0]"
          width="200rpx"
          height="200rpx"
          radius="16rpx"
        >
          <template v-slot:loading>
            <u-loading-icon color="#ccc"></u-loading-icon>
          </template>
          <template #error>
            <view style="font-size: 24rpx">加载失败</view>
          </template>
        </u-image>
        <u-image
          :show-loading="true"
          :src="guestFilmList[index]?.imgs[1]"
          width="200rpx"
          height="200rpx"
          radius="16rpx"
        >
          <template v-slot:loading>
            <u-loading-icon color="#ccc"></u-loading-icon>
          </template>
          <template #error>
            <view style="font-size: 24rpx">加载失败</view>
          </template>
        </u-image>
        <u-image
          :show-loading="true"
          :src="guestFilmList[index]?.imgs[2]"
          width="200rpx"
          height="200rpx"
          radius="16rpx"
        >
          <template v-slot:loading>
            <u-loading-icon color="#ccc"></u-loading-icon>
          </template>
          <template #error>
            <view style="font-size: 24rpx">加载失败</view>
          </template>
        </u-image>
      </view>
      <view class="bottom" @click="handleViewBigPhoto(item.imgs)">
        <view class="two">
          <u-image
            :show-loading="true"
            :src="guestFilmList[index]?.imgs[3]"
            width="200rpx"
            height="200rpx"
            radius="16rpx"
          >
            <template v-slot:loading>
              <u-loading-icon color="#ccc"></u-loading-icon>
            </template>
            <template #error>
              <view style="font-size: 24rpx">加载失败</view>
            </template>
          </u-image>
          <u-image
            :show-loading="true"
            :src="guestFilmList[index]?.imgs[4]"
            width="200rpx"
            height="200rpx"
            radius="16rpx"
          >
            <template v-slot:loading>
              <u-loading-icon color="#ccc"></u-loading-icon>
            </template>
            <template #error>
              <view style="font-size: 24rpx">加载失败</view>
            </template>
          </u-image>
        </view>
        <view class="one">
          <u-image
            :show-loading="true"
            :src="guestFilmList[index]?.imgs[5]"
            width="430rpx"
            height="430rpx"
            radius="16rpx"
          >
            <template v-slot:loading>
              <u-loading-icon color="#ccc"></u-loading-icon>
            </template>
            <template #error>
              <view style="font-size: 24rpx">加载失败</view>
            </template>
          </u-image>
        </view>
      </view>
      <view class="info">
        <view class="nickname">{{ item.title }}</view>
        <view class="love" @click="handleLove(item.id, index)">
          <!-- <u-icon name="heart" color="#FF79C6" size="40rpx"></u-icon> -->
          <i
            class="iconfont icon-guanzhu-zhihui"
            :class="{ active: item.isLiked ? true : false }"
          ></i>
          <view class="count">{{ item.likedCount }}</view>
        </view>
      </view>
      <view class="viewAll">
        <view @click="handleViewDetails(item.id)">照片详情</view>
      </view>
    </view>
    <!-- 加载更多/没有更多了 -->
    <view class="wrap" v-if="guestFilmList.length">
      <u-loadmore :status="status" :loading-text="loadingText" />
    </view>
  </template>

  <van-empty description="暂无客片" v-else />
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onLaunch, onShow, onHide, onReachBottom } from "@dcloudio/uni-app";
import { getGuestFilm, getGuestFilmNotId, giveLove } from "@/api/guestFilm";
import { getItem } from "@/utils/localStorage";
import verify from "@/utils/verify";

onMounted(() => {
  app();
});

const guestFilmList = ref([]);
const total = ref(0);

// 改变status即可
const status = ref("轻轻上拉");
const loadingText = ref("努力加载中");

// 页码
const pageNo = ref(1);
// 每页条数
const pageSize = ref(2);
// 店铺id（1：陕工院   2：西安时光锦）
const shopId = ref(1);

const app = async () => {
  if (guestFilmList.value.length) {
    // 获取了数据
    // 没有更多了
    if (guestFilmList.value.length >= total.value) {
      console.log("没有数据了");
      status.value = "nomore";
      return;
    }
  }

  let result;

  if (getItem("userInfo").id) {
    result = await getGuestFilm(
      pageNo.value,
      pageSize.value,
      shopId.value,
      getItem("userInfo").id
    );
  } else {
    result = await getGuestFilmNotId(
      pageNo.value,
      pageSize.value,
      shopId.value
    );
  }

  // console.log("客片：", result);

  // guestFilmList.value = result.data.result;

  console.log("guestFilmList.value:", guestFilmList.value);
  if (guestFilmList.value) {
    // guestFilmList.value.push(...result.data.result);
    guestFilmList.value = [...guestFilmList.value, ...result.data.result];
  }

  total.value = result.data.total;

  // console.log("guestFilmList.value:", guestFilmList.value);
};

// 页面触底了
onReachBottom(() => {
  status.value = "loading";
  // console.log('李佳怡你个坏蛋!!!')
  pageNo.value++;

  app();
});

// 查看大图
const handleViewBigPhoto = (item) => {
  uni.navigateTo({
    url: "/pagesB/bigPicture/index",
    success: function (res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit("acceptDataFromOpenerPage", {
        data: item,
      });
    },
  });
};

// 查看照片详情
const handleViewDetails = (id) => {
  uni.navigateTo({
    url: `/pagesB/photoDetails/index?id=${id}`,
  });
};

const handleLove = async (guestFilmId, index) => {
  console.log("verify：", verify());

  if (!verify()) {
    return;
  }

  const result = await giveLove(guestFilmId, getItem("userInfo").id);
  console.log("result：", result.data.data);

  //

  if (result.data.code == 200) {
    app();
    guestFilmList.value[index].isLiked = result.data.data;
    // 点赞成功
    if (result.data.data) {
      guestFilmList.value[index].likedCount++;
    } else {
      guestFilmList.value[index].likedCount--;
    }
  }
};
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  padding: 0 50rpx;
  margin-bottom: 30px;

  .top {
    display: flex;
    justify-content: space-between;
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 26rpx;

    .two {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .one {
    }
  }

  .info {
    display: flex;
    justify-content: flex-end;
    margin: 20rpx 0;

    .nickname {
      width: 80%;
      text-align: center;
      font-size: 30rpx;
      font-weight: 700;
    }

    .love {
      display: flex;
      align-items: center;

      .iconfont {
        font-size: 34rpx;
        margin-right: 10rpx;
      }

      .count {
        font-size: 34rpx;
      }

      .active {
        color: red;
      }
    }
  }

  .viewAll {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    color: #3e3e3e;
    margin-top: 20rpx;

    view {
      display: inline;
      border: 1px solid #666666;
      padding: 13rpx 25rpx;
      border-radius: 5rpx;
    }
  }
}
</style>
